<template>
  <div class="my-home">
    <div class="search-box">
      <div class="city-box">
        <span class="address" @click="$router.push('/citylist')">{{ cityname }}</span>
        <van-icon class="triangle"  @click="$router.push('/citylist')"/>
        <span class="line">|</span>
      </div>
      <van-search placeholder="请输入小区或地址" background="none"/>
      <!--  -->
      <div>
       <van-icon name="https://bpic.51yuansu.com/pic/cover/00/03/55/5722bcaed0fc1_610.jpg"
       @click="$router.push('/maphouse')"
       />
      </div>
    </div>

    <van-swipe class="my-swipe" :autoplay="3000" :height="212">
      <van-swipe-item v-for="item in images" :key="item.id">
        <img width="100%" height="100%" :src="`http://liufusong.top:8080${item.imgSrc}`" alt=""/>
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="false" class="icon">
      <van-grid-item icon="wap-home-o" text="整租" @click="$router.push('/find')"/>
      <van-grid-item icon="friends-o" text="合租" @click="$router.push('/find')" />
      <van-grid-item icon="location-o" text="地图找房" @click="$router.push('/maphouse')"/>
      <van-grid-item icon="shop-o" text="去出租" @click="$router.push('/gorent')"/>
    </van-grid>
    <div class="group">
      <div class="title">
        <h3>租房小组</h3>
        <span>更多</span>
      </div>
      <van-grid direction="horizontal" :gutter="10" :column-num="2">
        <van-grid-item v-for="item in list" :key="item.id">
          <div class="imgleft">
            <!-- http://liufusong.top:8080/ -->
            <img :src="`http://115.159.87.220:8080${item.imgSrc}`" alt="">
            <!-- <img :src="`http://liufusong.top:8080${item.imgSrc}` " alt=""> -->
          </div>
          <div class="inforight">
            <span>{{ item.title }}</span>
            <span>{{ item.desc }}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { Swipers, groups } from '@/api/shouye'
import { getCityToken } from '@/utils/storage'
export default {
  data () {
    return {
      // cityname: '上海',
      images: [],
      list: []
    }
  },
  computed: {
    cityname () {
      return getCityToken() || '上海'
    }
  },
  async created () {
    // this.cityname = localStorage.getItem('cityname')
    const { body } = await Swipers()
    console.log(body)
    this.images = [...body]
    const res = await groups()
    this.list = res.body
    console.log(res)
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.my-home {
  margin-top: 0;
  background-color: #f6f5f6;
  position: relative;
  .search-box {
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-43%);
  width: 100%;
  height: 34px;
  z-index: 2;
  .van-search {
    padding-left: 0;
  }
  .van-search__content {
    padding-left: 0;
  }
  .van-search,
  .van-cell {
    background-color: #fff;
  }
  .city-box {
    background-color: #fff;
    height: 34px;
    font-size: 14px;
    line-height: 34px;
    padding-left: 10px;
    // .van-icon {
    //   // margin-right: 10px;
    // }
  }
  .triangle {
        display: inline-block;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border: 5px solid transparent;
        border-top: 5px solid #7f7f80;
        vertical-align: middle;
        margin-left: 5px;
      }
  .line {
    height: 34px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 34px;
    background-color: #fff;
    color: #ccc;
  }
  .icon-box {
    width: 20px;
    height: 20px;
    padding: 3px;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 50%;
  }
}
  }
  .my-swipe {
    margin-top: 0;
    width: 100%;
    img {
      width: 100%;
    }
  }
  .icon {
    color: #07c160;
    font-size: 40px;
  }
.group {
  background-color: #f6f5f6;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title h3 {
  color: #333;
  font-size: 15px;
  margin: 15px 0 15px 20px;
}
.title span {
  color: #787d82;
  font-size: 14px;
  font-weight: 400;
  margin-right: 10px;
}
.showhouse ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.showhouse ul li {
  width: 45%;
  font-style: 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  background-color: #fff;
}
.showhouse ul li img {
  width: 50px;
  height: 50px;
  margin: 0 10px;
}
.showhouse ul li .text p {
  margin: 0;
  font-size: 14px;
  color: #333;
}
  // .more .van-grid .van-grid-item {
  //   flex-basis: 50%;
  //   padding-right: 10px;
  //   margin-top: 10px
  // }
 .imgleft {
    width: 50px;
    height: 50px;
    img {
      width: 100%;
    }
 }
 .inforight {
    display: flex;
    flex-direction: column;
  }
</style>
